<template>
  <div class="main-wrap">
    <Top-nav></Top-nav>
    <main>
      <h1>车轮子UI 网站快速成型工具</h1>
      <h2>一款新拟物风格基于 Vue 3.0 的CSS UI组件库</h2>
      <div class="bg-img">
        <img src="../assets/img/theme-index-blue.c38b733.png" alt />
      </div>
      <section class="info-list">
        <div class="info-item" v-for="(item,index) in list" :key="index">
          <img :src="item.imgSrc" alt class="info-img" />
          <span class="info-title">{{item.title}}</span>
          <span class="info-tips">{{item.tips}}</span>
          <span class="info-btn">查看详情{{count}}</span>
        </div>
      </section>
       <section class="chang-color" @click="changeColor">
        <svg t="1599030789173" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3779" width="32" height="32"><path d="M257.23486815 253.09234608m-49.71026963 0a2.91271111 2.91271111 0 1 0 99.42053926 0 2.91271111 2.91271111 0 1 0-99.42053926 0Z" p-id="3780"></path><path d="M97.74775349 512a3.03407408 2.91271111 0 1 0 103.56306133 0 3.03407408 2.91271111 0 1 0-103.56306133 0Z" p-id="3781"></path><path d="M738.70792263 290.71887686a2.91271111 2.91271111 0 1 0 70.31020538-70.3002633 2.91271111 2.91271111 0 1 0-70.31020538 70.3002633Z" p-id="3782"></path><path d="M516.14252206 147.45802311m-51.78153127 0a3.03407408 3.03407408 0 1 0 103.56306133 0 3.03407408 3.03407408 0 1 0-103.56306133 0Z" p-id="3783"></path><path d="M221.57562007 805.5354139a2.91271111 2.91271111 0 1 0 70.30026331-70.30026332 2.91271111 2.91271111 0 1 0-70.30026331 70.30026332Z" p-id="3784"></path><path d="M737.76747498 735.69621333c-20.71261275 18.64135111-20.71261275 51.78153127 0 70.42288238 20.71261275 18.64135111 53.85279169 18.64135111 72.4941428 0 20.71261275-18.64135111 20.71261275-51.78153127 0-70.42288238C789.54900502 717.05486222 756.40882608 717.05486222 737.76747498 735.69621333z" p-id="3785"></path><path d="M514.07126164 878.61323852m-49.71026963 0a2.91271111 2.91271111 0 1 0 99.42053926 0 2.91271111 2.91271111 0 1 0-99.42053926 0Z" p-id="3786"></path><path d="M880.68450016 514.07126164m-49.71026963 0a2.91271111 2.91271111 0 1 0 99.42053925 0 2.91271111 2.91271111 0 1 0-99.42053925 0Z" p-id="3787"></path><path d="M516.14252206 242.7360391c-149.13080889 0-271.33522132 120.13315201-271.33522131 271.33522133 0 149.13080889 120.13315201 271.33522132 271.33522131 271.33522132 149.13080889 0 271.33522132-120.13315201 271.33522133-271.33522132C785.40648297 362.86919111 665.27333095 242.7360391 516.14252206 242.7360391zM516.14252206 700.48477275c-103.56306132 0-188.48477275-84.92171022-188.48477275-188.48477275 0-103.56306132 84.92171022-188.48477275 188.48477275-188.48477275s188.48477275 84.92171022 188.48477276 188.48477275C702.55603317 615.56306132 619.70558461 700.48477275 516.14252206 700.48477275z" p-id="3788"></path></svg>
      </section>
    </main>
    <footer></footer>
   
  </div>
</template>


<script>
import TopNav from "../components/TopNav.vue";
import img1 from "../assets/img/guide.0a8462c.png";
import img2 from "../assets/img/component.bd3411b.png";
import img3 from "../assets/img/resource.a72b8f8.png";
import img4 from "../assets/img/aaddfv.svg";

import { ref } from "vue";
export default {
  components: {
    TopNav,
  },
  setup() {
    const list = ref([
      {
        imgSrc: img1,
        title: "指南",
        tips:
          "了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。",
      },
      {
        imgSrc: img2,
        title: "组件",
        tips:
          "使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。",
      },
      {
        imgSrc: img3,
        title: "主题",
        tips: "在线主题编辑器，可视化定制和管理站点主题、组件样式",
      },
      {
        imgSrc: img4,
        title: "资源",
        tips:
          "下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。",
      },
    ]);

    const bgColor = ref(false)

    const changeColor = ()=> {
        bgColor = !bgColor.value
        console.log(bgColor.value)
    }

    return {
      list,
      bgColor,
      changeColor
    };
  },
};
</script>

<style lang='scss' scoped>
html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}
footer {
  background-color: #f7fbfd;
}

main {
  .chang-color{
      position: sticky;
      bottom: 5%;
      right: 6%;
      z-index: 1;
  }
  .info-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    // max-width: 1200px;
    width: auto;
    margin: 60px 40px;
    .info-item {
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      width: 300px;
      // flex-basis: 20%;
      border: 1px solid #eaeefb;
      border-radius: 10px;
      box-shadow: 18px 18px 30px #d1d9e6, -18px -18px 30px #fff;
      transition: all 0.3s ease-in-out;

      &:hover {
        transform: translate(0, -10px);
      }
      .info-btn {
        margin-top: 20px;
        padding: 20px;
        font-size: 14px;
        cursor: pointer;
        color: #4bc0c8;
        border-top: 1px solid #4bc0c8;
        &:hover {
          background-color: #4bc0c8;
          color: #fff;
        }
      }
      .info-img {
        width: 160px;
        height: 120px;
        margin: 0;
        margin: 60px auto 66px;
        border-radius: 50px;
        border-radius: 50px;
      }
      .info-tips {
        padding: 25px;

        font-size: 14px;
        color: #99a9bf;
      }
      .info-title {
        margin-top: 10px;
        color: #1f2f3d;
        font-size: 18px;
      }
    }
  }

  h1 {
    margin: 20px auto 0;
    font-weight: 400;
    text-align: center;
  }
  h2 {
    text-align: center;
    font-weight: 300;
  }
  .bg-img {
    // width: 50vw;
    // height: 70vh;
    margin: 0 auto;
    text-align: center;
    img {
      max-width: 60vw;
      max-height: 70vh;
    }
  }
}
</style>